<template>
	<div class="current-house">
		<van-image :src="require('./../image/build.png')" />
		<div class="info">
			<div>
				<p>房屋编号：{{ detail.fwbh || '-' }}</p>
				<span @click="onChange">
					切换房屋
					<van-icon name="arrow" />
				</span>
			</div>
			<div>房屋地址：{{ detail.address || '-' }}</div>
			<div>当前用户编号：{{ route?.query?.id || '-' }}</div>
		</div>
	</div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import { useRoute } from 'vue-router'

defineProps({
	detail: {
		type: Object,
		default: () => {}
	}
})

const emits = defineEmits(['onChange'])

const route = useRoute()
const onChange = () => {
	emits('onChange')
}

</script>

<style scoped lang="less">
.current-house {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 188px;
	background: url(../../bind/image/page_bg.png) no-repeat top left / 100% auto;
	color: #fff;
	padding: 0 40px;
	box-sizing: border-box;
	.van-image {
		width: 96px;
		height: 96px;
	}
	.info {
		width: 0;
		flex: 1;
		margin-left: 12px;
		padding: 24px 0;
		box-sizing: border-box;
		div {
			display: flex;
			min-height: 34px;
			line-height: 34px;
			margin-top: 8px;
			&:nth-of-type(1) {
				margin: 0;
			}
			p {
				width: 0;
				flex: 1;
			}
			span {
				height: 44px;
				line-height: 44px;
				padding: 0 14px;
				background: var(--van-primary-color);
				border-radius: 22px;
				font-size: 26px;
				margin-top: -6px;
			}
		}
	}
}
</style>
